<template>
  <div>
    <h1 style="font-size:18px;">Loading 加载中</h1>
    <p style="font-size:14px;">基础用法</p>
    <div class="testLoading">
      <Loading v-model="showLoading" size="30"></Loading>
    </div>
    <p>最简单使用 <code>Loading</code> 的方法。</p>
    <p> <code>Loading</code>组件的 <code>v-model</code> 设置为 <code>true</code> 即可显示默认 <code>Loading</code> 效果。 </p>
    <p> <code>Loading</code>组件默认为行内元素。 </p>
    <p>代码示例：</p>
    <pre>
      &lt;template&gt;
        &lt;Loading v-model=&quot;showLoading&quot;&gt;&lt;/Loading&gt;
      &lt;/template&gt;
      &lt;script&gt;
      export default {
        data () {
          return {
            showLoading: true
          }
        }
      }
      &lt;/script&gt;
    </pre>
    <p style="font-size:14px;">自定义尺寸</p>
    <div class="testLoading">
      <Loading v-model="showLoading" size="18"></Loading>
      <Loading v-model="showLoading" size="16"></Loading>
      <Loading v-model="showLoading"></Loading>
    </div>
    <p> <code>Loading</code> 组件的默认尺寸为 <code>12px</code> ，可结合业务需求，通过对 <code>size</code> 属性的设置来改变大小。</p>
    <p>代码示例：</p>
    <pre>
      &lt;template&gt;
        &lt;Loading v-model=&quot;showLoading&quot; size=&quot;18&quot;&gt;&lt;/Loading&gt;
        &lt;Loading v-model=&quot;showLoading&quot; size=&quot;16&quot;&gt;&lt;/Loading&gt;
        &lt;Loading v-model=&quot;showLoading&quot;&gt;&lt;/Loading&gt;
      &lt;/template&gt;
      &lt;script&gt;
      export default {
        data () {
          return {
            showLoading: true
          }
        }
      }
      &lt;/script&gt;
    </pre>
    <p style="font-size:14px;">自定义动画</p>
    <div class="testLoading">
      <Loading v-model="showLoading" size="50"></Loading>
    </div>
    <br>
    <div class="testLoading">
      <Loading v-model="showLoading" :animate="animation1" size="50"></Loading>
    </div>
    <br>
    <div class="testLoading">
      <Loading v-model="showLoading" :animate="animation"></Loading>
    </div>
    <p> <code>Loading</code> 组件可通过设置 <code>animation</code> 属性来改变加载动画。 <code>loading</code> 为默认动画。可设置为 <code>around</code> 、<code>bubbling</code> 。 </p>
    <p>代码示例：</p>
    <pre>
      &lt;template&gt;
        &lt;div class=&quot;testLoading&quot;&gt;
          &lt;Loading v-model=&quot;showLoading&quot;&gt;&lt;/Loading&gt;
        &lt;/div&gt;
        &lt;br&gt;
        &lt;div class=&quot;testLoading&quot;&gt;
          &lt;Loading v-model=&quot;showLoading&quot; :animate=&quot;animation1&quot;&gt;&lt;/Loading&gt;
        &lt;/div&gt;
        &lt;br&gt;
        &lt;div class=&quot;testLoading&quot;&gt;
          &lt;Loading v-model=&quot;showLoading&quot; :animate=&quot;animation&quot;&gt;&lt;/Loading&gt;
        &lt;/div&gt;
      &lt;/template&gt;
      &lt;script&gt;
      export default {
        data () {
          return {
            showLoading: true,
            animation: 'around',
            animation1: 'bubbling'
          }
        }
      }
      &lt;/script&gt;
    </pre>
    <p style="font-size:14px;">整页加载</p>
    <div class="testLoading">
      <Button type="primary" @click="openFullScreen">点击加载</Button>
      <Loading v-model="showLoadingF" :animate="animation" :fullScreen="isfullScreen"></Loading>
    </div>
    <p>通过设置 <code>Loading</code>组件的 <code>fullScreen</code> 属性来决定是否为全屏加载。默认为 <code>false</code> 。 </p>
    <p>代码示例：</p>
    <pre>
      &lt;template&gt;
        &lt;Button type=&quot;primary&quot; @click=&quot;openFullScreen&quot;&gt;点击加载&lt;/Button&gt;
        &lt;Loading v-model=&quot;showLoading&quot; :animate=&quot;animation&quot; :fullScreen=&quot;isfullScreen&quot;&gt;&lt;/Loading&gt;
      &lt;/template&gt;
      &lt;script&gt;
      export default {
        data () {
          return {
            showLoading: false,
            animation: 'around',
            isfullScreen: true
          }
        },
        methods: {
          openFullScreen () {
            this.showLoading = true
            setTimeout(()=>{
              this.showLoading = false
            },1000)
          }
        }
      }
      &lt;/script&gt;
    </pre>
    <p style="font-size:14px;">API</p>
    <p>Loading Props</p>
    <Table :columns="tableColumn" :data="tableData"></Table>
  </div>

</template>

<script>
export default {
  name: 'TestLoading',
  data () {
    return {
      tableColumn: [
        {
          title: '属性',
          key: 'attribute'
        },
        {
          title: '说明',
          key: 'explain'
        },
        {
          title: '类型',
          key: 'type',
          tooltip: true
        },
        {
          title: '默认值',
          key: 'default'
        }
      ],
      tableData: [
        {
          attribute: 'v-model',
          explain: 'Loading组件是否显示',
          type: 'Boolen',
          default: 'false'
        },
        {
          attribute: 'size',
          explain: 'Loading组件的大小',
          type: 'Number | String',
          default: '12px'
        },
        {
          attribute: 'animate',
          explain: 'Loading组件的动画效果',
          type: 'String | loading、bubbling、around',
          default: 'loading'
        },
        {
          attribute: 'fullScreen',
          explain: 'Loading组件是否全屏显示',
          type: 'Boolen',
          default: 'false'
        },
        {
          attribute: 'inline',
          explain: 'Loading组件是否为行内元素',
          type: 'Boolen',
          default: 'false'
        }
      ],
      showLoading: true,
      animation: 'around',
      animation1: 'bubbling',
      isfullScreen: true,
      showLoadingF: false
    }
  },
  methods: {
    openFullScreen () {
      this.showLoadingF = true
      setTimeout(() => {
        this.showLoadingF = false
      }, 1000)
    }
  }
}
</script>

<style scoped lang="less">
h1 {
  font-size: 18px;
  padding: 10px 0;
}
h2 {
  font-size: 14px;
  padding: 10px 0;
}
p{
  padding: 10px 0;
}
.testLoading {
  width: 500px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}
code {
  background-color: #aaaaaa;
}
pre {
  font-size: 14px;
}
</style>
